<% layout('/layouts/default.html', {title: '', bodyClass: ''}){ %>
<!-- <link rel="stylesheet" href="${ctxStatic}/modules/sys/sysDesktop.css?${_version}"> -->
<div class="content pb0">
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="fa fa-cog"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text"></span>
                    <span class="info-box-number"><a href="${ctx}/ab/abData/list">室温查询</a></span>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></a></span>
                <div class="info-box-content">
                    <span class="info-box-text"></span>
                    <span class="info-box-number"><a href="${ctx}/ab/abData/list">平均温度</a></span>
                </div>
            </div>
        </div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-green"><i class="fa fa-internet-explorer"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text"></span>
                    <span class="info-box-number"><a href="${ctx}/ab/abTemp/shuoming">服务帮助</a></span>
                </div>
            </div>
        </div>
        <!--		<div class="col-md-3 col-sm-6 col-xs-12">-->
        <!--			<div class="info-box">-->
        <!--				<span class="info-box-icon bg-yellow"><i class="fa fa-users"></i></span>-->

        <!--				<div class="info-box-content">-->
        <!--					<span class="info-box-text">服务帮助</span>-->
        <!--					<span class="info-box-number">士大夫</span>-->
        <!--				</div>-->
        <!--			</div>-->
        <!--		</div>div-->
    </div>
    <div class="row">
        <section class="col-md-12 ui-sortable">
            <div class="box box-widget">
                <div class="box-header with-border">
                    <h3 class="box-title">总用户日均温 702 吉林省省长春市市 </h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-wrench"></i></button>
                            <ul class="dropdown-menu" role="menu">
                                <!--								<li><a href="#">导出Excel</a></li>-->
                                <!--								<li><a href="#">导出Word</a></li>-->
                                <!--								<li class="divider"></li>-->
                                <!--								<li><a href="#">基本设置</a></li>-->
                            </ul>
                        </div>
                        <button type="button" class="btn btn-box-tool" data-widget="remove">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div>
                            <div class="chart">
                                <div id="myChart" style="height:330px;width:100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!--轮播图-->
    <div class="row">
        <section class="col-md-12 ui-sortable">
            <div class="box box-widget">
                <div class="box-header with-border">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel"style="height: 200px">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="${ctxStatic}/ditu.png" alt="..." height="200px" style="height:200px">
                                <div class="carousel-caption">
                                    投放广告请联系站长
                                </div>
                            </div>
                            <div class="item">
                                <img src="${ctxStatic}/dongtai.png" alt="..." height="200px"  style="height:200px">
                                <div class="carousel-caption">
                                    投放广告请联系站长
                                </div>
                            </div>

                            <div class="item">
                                <img src="${ctxStatic}/jieshao.png" alt="..." height="200px"  style="height:200px">
                                <div class="carousel-caption">
                                    投放广告请联系站长
                                </div>
                            </div>
                        </div>

                        <!-- Controls -->
                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

<div class="col-md-7 ui-sortable" style="width: 100%;position: relative;">

    <!-- Chat box -->
    <div class="box box-success box-widget" style="width: 49%;float:left;">
        <div class="box-header">
            <i class="fa fa-bullhorn"></i>
            <h3 class="box-title">重要公告</h3>
            <div class="box-tools pull-right" data-toggle="tooltip" title="" data-original-title="Status">
                <a href="${ctx}/ab/abNotiy/list">更多..</a>
            </div>
        </div>
        <div class="box-body chat" id="notiy-box"></div>
    </div>
    <!-- /.box (chat box) -->

    <!-- TO DO List -->
    <div class="box box-success box-widget" style="width: 49%;float:right ;">
        <div class="box-header">
            <i class="fa fa-bullhorn"></i>
            <h3 class="box-title">最新新闻</h3>
            <div class="box-tools pull-right" data-toggle="tooltip" title="" data-original-title="Status">
                <a href="${ctx}/ab/abNotiy/list">更多..</a>
            </div>
        </div>
        <div class="box-body chat" id="news-box" style="overflow: hidden; width: auto; "></div>
    </div>
    <!-- /.box -->

</div>
</div>
</div>
<footer class="main-footer m0">
    <div class="pull-right hidden-xs">当前版本： ${@Global.getConfig('productVersion')}</div>
    &copy; ${@DateUtils.getYear()} ${@Global.getConfig('productName')} - Powered By dreamcode
</footer>
<% } %>
<script src="${ctxStatic}/jquery/jquery-ui-sortable-1.12.1.min.js"></script>
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script>
    var myChart1 = echarts.init(document.getElementById('myChart'), 'default');

    $.get('${ctx}/ab/abData/indexechart').done(function (data) {
        myChart1.setOption({
            // title: {
            //     text: js.formatDate(new Date(), 'yyyy-MM')
            // },
            tooltip: {},
            legend: {
                data: ['平均室温']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['bar', 'line', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            grid: {
                top: '49',
                right: '20',
                bottom: '30'
            },
            xAxis: {
                type: 'category',
                data: data.x
            },
            yAxis: [
                {
                    type: 'value'
                }
            ],
            //color: ['#FAD860','#F3A43B','#60C0DD','#C6E579'],
            series: {
                type: 'bar',
                // 根据名字对应到相应的系列
                name: '平均温度',
                data: data.v
            }
        });
        myChart1.resize();
    });
    //公告列表
    $.get('${ctx}/ab/abNotiy/shortListData').done(function (data) {
        for (var i = 0; i < data.length; i++) {
            var notiy = data[i];
            $("#notiy-box").append('<div class="item">' +
            '                <p>' +
            '                    <a href="#" class="name">' +
            '                        <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> '+ notiy.createTime +'</small>' +
                                        notiy.title +
            '                    </a><br>' + notiy.content.substring(0,30) + '...' +
            '                </p>' +
            '            </div>');
        }
    });
    //新闻列表
    $.get('${ctx}/ab/abNews/shortListData').done(function (data) {
        for (var i = 0; i < data.length; i++) {
            var news = data[i];
            $("#news-box").append('<div class="item">' +
                '                <p>' +
                '                    <a href="#" class="name">' +
                '                        <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> '+ news.createTime +'</small>' +
                news.title +
                '                    </a><br>' + news.content.substring(0,30) + '...' +
                '                </p>' +
                '            </div>');
        }
    });
    $(function () {
        $(window).resize(function () {
            var footerHeight = $('.main-footer').outerHeight() || 0;
            var windowHeight = $(window).height();
            $('.content').css('min-height', windowHeight - footerHeight);
            myChart1.resize();
        }).resize();
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $(window).resize();
        });
        $('.ui-sortable').sortable({
            connectWith: '.ui-sortable',
            handle: '.box-header, .nav-tabs',
            placeholder: 'sort-highlight',
            forcePlaceholderSize: true,
            zIndex: 999999
        }).find('.box-header, .nav-tabs').css('cursor', 'move');
    });
</script>